<template>
  <div>
    <!-- <div><span>全选: </span> <input type="checkbox" /> <br>
    <span>02</span> <input type="checkbox" /> <br>
    <span>蕾姆</span> <input type="checkbox" /> <br>
    <span>薇尔莉特</span>  <input type="checkbox" /> <br>
    <span>派蒙</span> <input type="checkbox" /> <br>
    <span>拉姆</span> <input type="checkbox" /> <br>
    </div> -->
    <div>
      <input type="checkbox" v-model="isCheck" />  <button @click="fanBtn">反选</button>
      <ul>
        <li v-for="(obj,index) in arr" :key="index">
            <input type="checkbox" v-model="obj.checked">
            <span> {{obj.name}} </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        {
          name: '02',
          checked: false
        },
        {
          name: '薇尔莉特',
          checked: false
        },
        {
          name: '蕾姆',
          checked: false
        },
        {
          name: '拉姆',
          checked: false
        },
        {
          name: '派蒙',
          checked: false
        }
      ]
    }
  },
  computed: {
    isCheck: {
      set (val) {
        console.log(val)
        this.arr.forEach(function (obj) {
          obj.checked = val
        })
      },
      get () {
        // every 是数组的方法,
        // 作用 : 遍历数组的每一项,找到第一个不符合条件的, every直接原地返回false
        return this.arr.every(obj => obj.checked)
      }
    }
  },
  methods: {
    fanBtn () {
      this.arr.forEach(function (obj) {
        obj.checked = !obj.checked
      })
    }
  }

}
</script>

<style>
</style>
